.demo{  
      width: 100%;
      height:100%;
      background-color:#fff;
      padding: 3em 0;  
    .conteiner{
            width: 96%;
            margin: auto;
            // position: relative;  

        .key{
            color:hsl(24, 100%, 52%);
            font-size: 2.5em;
            font-weight:2em;
            line-height:3.5em;
            margin-left: 8%;
        }
        .key2{
            display: flex;
            justify-content: space-around;
            width: 90%;
            margin: auto; 
            overflow: hidden;          
        }
        .key2 img{
            width: 80%; 
            position: relative; 
            z-index: 1;
            left: 0px;
            top: 0em;
        }
        .key2 div{
            overflow: hidden;
             position: relative;
        }
        .key2>div>p{
            position:absolute;
            background-color: rgba(100,100,100,0.6);
            padding:1.3em   0;
            width: 80%;
            height:16em;
            font-size: 0.2em;
            color:#fff;
            bottom: -100px;
            z-index: 2;
            transition: all 0.5s linear;
            display: flex;
            top:91px;
            flex-direction: column;
            line-height: 2em;
           
            top: 90px;
            line-height: 8em;
        }
        .key2 div:hover  p{
            transform: translateY(-30px);
        }
    }
}
@media screen and(max-width:(1300px)){
    .key2>div>p{
        line-height: 2em;
    }
}

.demo2{
    width: 100%;
    height:100%;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
            
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo2{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}

@media screen and (max-width:(555px)){
    .demo2{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}
.demo3{
    padding:3em 0;
    width: 100%;
    height:100%;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size:1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}

@media screen and(max-width:(670px)) {
    .demo3{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo3{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo4{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo4{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo4{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo5{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo5{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo5{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo6{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo6{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo6{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo7{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo7{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo7{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}
.demo8{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width:58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo8{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo8{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo9{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo9{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo9{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo10{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo10{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo10{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo11{
    width: 100%;
    height:100%;
    padding-bottom:3em;
    border-bottom:1px dashed #888;
    .conteiner{
        display: flex;
        width: 80%;
        margin: auto;
        justify-content: space-between;
        .hr{
            width:40%;
        }
        .hr2{
            width: 58%;
            ul li:nth-child(1){
                font-size: 1.2em;
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
            }
            ul li:nth-child(2){
                padding-bottom: 0.5em;
                &:hover{
                    color: #ff6900;
                }
               }
                ul li:nth-child(3){
                    &:hover{
                        color: #ff6900;
                    }
                }
        .hr3{
            width: 6em;
            border:1px solid #ff6900;
            border-radius: 10px; 
            text-align: center;
            color:#ff6900;
            float: right;
            margin-right: 2%;
            &:hover{
             background-color:#ff6900; 
             color:#fff;
         }
         }  
      }
    }
}
@media screen and(max-width:(670px)) {
    .demo11{
        .conteiner{
            .hr2{
                ul li:nth-child(1){
                    font-size: 0.8em !important;
                }
                ul li:nth-child(2){
                    font-size: 0.3em !important;
                }
                ul li:nth-child(3){
                    font-size: 0.1em !important;
                }
            }
        }
    }
}
@media screen and (max-width:(555px)){
    .demo11{
        .conteiner {
            .hr {
            display: none;
            }
            .hr2{
                width: 100% !important;
            }
        }
    }
}

.demo12{
  .conteiner{
      width: 100%;
      height:100%;
      .btn-group{
          padding:3em 0;
          display: flex;
          justify-content: center;
          align-items: center;
      }
  }
}

.demo13{
    width:100%;
    border:1px solid #3b3b3b;
    background-color:#3b3b3b; 
    color: #888;
  
    .coteiner{
        align-items: center;
         display: flex;
         width: 100%;
         padding:2em 0;
         align-items: center;
         justify-content: space-around;
         .nn{
             .jj5{
                 display: flex;
                 .jj{
                     width:20%;
                 }
                 .jj2{
                        width:20%;
                 }
                
             }
         }
         .nn2{
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
    }
}